<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
    <title>黑马头条</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="../../../plugins/vant/index.css">
    <!-- 页面样式 -->
    <link rel="stylesheet" href="../../../plugins/css/index.css">
</head>

<body>
<div id="app">
    <div class="article">
        <script>
                        var _authorApUserId= 4
        </script>
        <div style="display:none;">4</div>
            <van-row>
                <van-col span="24" class="article-title" >滕哈赫：我们正在建立赢家文化 期待着新赛季开始</van-col>
            </van-row>

            <van-row type="flex" align="center" class="article-header">
                <van-col span="3">
                    <van-image round class="article-avatar" src="https://p3.pstatp.com/thumb/1480/7186611868"></van-image>
                </van-col>
                <van-col span="16">
                    <div>admin</div>
                    <div>2022-8-7 16:48:39</div>

                </van-col>
                <van-col span="5">
                    <van-button round :icon="relation.isfollow ? '' : 'plus'" type="info" class="article-focus"
                                :text="relation.isfollow ? '取消关注' : '关注'" :loading="followLoading" @click="handleClickArticleFollow">
                    </van-button>
                </van-col>
            </van-row>
        <van-row class="article-content">
                        <van-col span="24" class="article-text">直播吧8月7日讯 在新赛季的首场比赛前，曼联新帅滕哈赫接受了俱乐部官网的采访，他被问到了球队目前的一些情况。</van-col>
                        <van-col span="24" class="article-text">关于马夏尔</van-col>
                        <van-col span="24" class="article-text">滕哈赫：“他无法出战，遗憾的是这是事实，他无法参与到这个赛季的首战。”</van-col>
                        <van-col span="24" class="article-text">马夏尔在季前赛状态很好</van-col>
                        <van-col span="24" class="article-text">滕哈赫：“是的，是这样的，但我们是一支球队，他有一个非常棒的季前赛，但当他不能上场时，其他球员必须站出来。我们有球员，我们在这个位置上有解决方案。”</van-col>
                        <van-col span="24" class="article-text">准备好迎接新赛季了吗？</van-col>
                        <van-col span="24" class="article-text">滕哈赫：“我真的很期待，能在周日开始真的很令人兴奋，我们在季前赛表现很好。我认为这支球队运作得非常棒，我们进步了，我们带来了一种比赛方式，我们期待着新赛季的开始。”</van-col>
                        <van-col span="24" class="article-text">过去的几个月感觉到球员给你和你的团队真正的回应了吗？</van-col>
                        <van-col span="24" class="article-text">滕哈赫：“是的，我认为我们在季前赛期间团结在了一起，巡回赛很棒，因为我们整天都在一起。我想再次回来很好，这是一个集体，现在我们需要在场上展示这一点。”</van-col>
                        <van-col span="24" class="article-text">新赛季目标是什么？</van-col>
                        <van-col span="24" class="article-text">滕哈赫：“这很重要，我们是曼联，我们需要赢下每一场比赛，这将是我们进入到每场比赛的方式。”</van-col>
                        <van-col span="24" class="article-text">建立一支成功的团队关键是什么？</van-col>
                        <van-col span="24" class="article-text">滕哈赫：“我们正在建立一种赢家文化，这从本周在卡灵顿开始。高标准、良好的价值观、努力工作，在比赛的方式上努力，最终你会取得成功。”</van-col>
                        <van-col span="24" class="article-text">关于老特拉福德</van-col>
                        <van-col span="24" class="article-text">滕哈赫：“我能感受到老特拉福德的氛围，球队必须成为球迷的榜样，我们需要勇敢、努力和合作，然后这种氛围才会从球迷那里回到球场，我对此深信不疑。”</van-col>
                        <van-col span="24" class="article-text">享受这份工作吗？</van-col>
                        <van-col span="24" class="article-text">滕哈赫：“这是一份忙碌的工作，但我并不讨厌工作，所以这没问题，特别是当你从事足球的时候。这是很棒的工作，我从中获得了很多能量，我希望能将这一点带到我们的团队中。”</van-col>
                        <van-col span="24" class="article-text">关于赛季中期进行世界杯</van-col>
                        <van-col span="24" class="article-text">滕哈赫：“是的，很明显，我们必须考虑到这一事实，当你组建你的球队时，你就会考虑这一点。我们当然在计划这些，所以要考虑的东西有很多。”</van-col>
                        <van-col span="24" class="article-text">执教曼联对你来说是否是一个值得骄傲的时刻？</van-col>
                        <van-col span="24" class="article-text">滕哈赫：“是的，当然，这就是我期待的原因，但归根结底，我们需要赢得胜利。”</van-col>
                        <van-col span="24" class="article-text">关于对阵布莱顿</van-col>
                        <van-col span="24" class="article-text">滕哈赫：“这将是一个强硬的对手，这一点是很明显的，因为他们有一个很好的团队，他们在一起已经有很长一段时间。他们有一位出色的主教练，合作了很长时间，所以他们的理念和风格非常清晰，这将是一个难对付的对手，但我相信周日我们会取得好成绩，如果我们有好的表现，我们有很大机会赢下比赛。”</van-col>
                        <van-col span="24" class="article-text">（马东宇）</van-col>
        </van-row>

        <van-row type="flex" justify="center" class="article-action">
            <van-col>
                <van-button round :icon="relation.islike ? 'good-job' : 'good-job-o'" class="article-like"
                            :loading="likeLoading" :text="relation.islike ? '取消赞' : '点赞'" @click="handleClickArticleLike"></van-button>
                <van-button round :icon="relation.isunlike ? 'delete' : 'delete-o'" class="article-unlike"
                            :loading="unlikeLoading" @click="handleClickArticleUnlike">不喜欢</van-button>
            </van-col>
        </van-row>

        <!-- 文章评论列表 -->
        <van-list v-model="commentsLoading" :finished="commentsFinished" finished-text="没有更多了"
                  @load="onLoadArticleComments">
            <van-row id="#comment-view" type="flex" class="article-comment" v-for="(item, index) in comments" :key="index">
                <van-col span="3">
                    <van-image round src="https://p3.pstatp.com/thumb/1480/7186611868" class="article-avatar"></van-image>
                </van-col>
                <van-col span="21">
                    <van-row type="flex" align="center" justify="space-between">
                        <van-col class="comment-author" v-html="item.authorName"></van-col>
                        <van-col>
                            <van-button round :icon="item.operation === 0 ? 'good-job' : 'good-job-o'" size="normal"
                                        @click="handleClickCommentLike(item)">{{ item.likes || '' }}
                            </van-button>
                        </van-col>
                    </van-row>

                    <van-row>
                        <van-col class="comment-content" v-html="item.content"></van-col>
                    </van-row>
                    <van-row type="flex" align="center">
                        <van-col span="10" class="comment-time">
                            {{ item.createdTime | timestampToDateTime }}
                        </van-col>
                        <van-col span="3">
                            <van-button round size="normal" v-html="item.reply" @click="showCommentRepliesPopup(item.id)">回复 {{
                                item.reply || '' }}
                            </van-button>
                        </van-col>
                    </van-row>
                </van-col>
            </van-row>
        </van-list>
        <van-row>
            <van-col span="24" >
                <van-button round size="normal" @click="loadMoreComments">
                    查看更多
                </van-button>
            </van-col>
        </van-row>
    </div>
    <!-- 文章底部栏 -->
    <van-row type="flex" justify="space-around" align="center" class="article-bottom-bar">
        <van-col span="13">
            <van-field v-model="commentValue" placeholder="写评论">
                <template #button>
                    <van-button icon="back-top" @click="handleSaveComment"></van-button>
                </template>
            </van-field>
        </van-col>
        <van-col span="3">
            <van-button icon="comment-o" @click="handleScrollIntoCommentView"></van-button>
        </van-col>
        <van-col span="3">
            <van-button :icon="relation.iscollection ? 'star' : 'star-o'" :loading="collectionLoading"
                        @click="handleClickArticleCollection"></van-button>
        </van-col>
        <van-col span="3">
            <van-button icon="share-o"></van-button>
        </van-col>
    </van-row>

    <!-- 评论Popup 弹出层 -->
    <van-popup v-model="showPopup" closeable position="bottom"
               :style="{ width: '750px', height: '60%', left: '50%', 'margin-left': '-375px' }">
        <!-- 评论回复列表 -->
        <van-list v-model="commentRepliesLoading" :finished="commentRepliesFinished" finished-text="没有更多了"
                  @load="onLoadCommentReplies">
            <van-row id="#comment-reply-view" type="flex" class="article-comment-reply"
                     v-for="(item, index) in commentReplies" :key="index">
                <van-col span="3">
                    <van-image round src="https://p3.pstatp.com/thumb/1480/7186611868" class="article-avatar"></van-image>
                </van-col>
                <van-col span="21">
                    <van-row type="flex" align="center" justify="space-between">
                        <van-col class="comment-author" v-html="item.authorName"></van-col>
                        <van-col>
                            <van-button round :icon="item.operation === 0 ? 'good-job' : 'good-job-o'" size="normal"
                                        @click="handleClickCommentReplyLike(item)">{{ item.likes || '' }}
                            </van-button>
                        </van-col>
                    </van-row>

                    <van-row>
                        <van-col class="comment-content" v-html="item.content"></van-col>
                    </van-row>
                    <van-row type="flex" align="center">
                        <!-- TODO: js计算时间差 -->
                        <van-col span="10" class="comment-time">
                            {{ item.createdTime | timestampToDateTime }}
                        </van-col>
                    </van-row>
                </van-col>
            </van-row>
        </van-list>
        <!-- 评论回复底部栏 -->
        <van-row type="flex" justify="space-around" align="center" class="comment-reply-bottom-bar">
            <van-col span="13">
                <van-field v-model="commentReplyValue" placeholder="写评论">
                    <template #button>
                        <van-button icon="back-top" @click="handleSaveCommentReply"></van-button>
                    </template>
                </van-field>
            </van-col>
            <van-col span="3">
                <van-button icon="comment-o"></van-button>
            </van-col>
            <van-col span="3">
                <van-button icon="star-o"></van-button>
            </van-col>
            <van-col span="3">
                <van-button icon="share-o"></van-button>
            </van-col>
        </van-row>
    </van-popup>
</div>

<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="../../../plugins/js/vue.min.js">
</script>
<script src="../../../plugins/js/vant.min.js"></script>
<!-- 引入 Axios 的 JS 文件 -->
<script src="../../../plugins/js/axios.min.js"></script>
<!-- 页面逻辑 -->
<script src="../../../plugins/js/index.js"></script>
</body>
</html>
